<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			* {
				touch-action: pan-y;
			}
			
			[v-cloak] {
				display: none;
			}
			
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			
			.mui-bar-nav {
				background: #f16456;
				height: 58px;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-icon-left-nav,
			.mui-action-back:active {
				color: #FFFFFF;
				margin-top: 18px;
			}
			
			.mui-bar .mui-title,
			.mui-btn-link {
				margin-top: 18px;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 58px;
			}
			
			.mui-content {
				height: 100%;
				background-color: #eaeaea;
			}
			
			#msg-list {
				height: 100%;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
			
			.msg-item {
				padding: 8px;
				clear: both;
			}
			
			.msg-item .mui-item-clear {
				clear: both;
			}
			
			.msg-item .msg-user-img {
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 7px;
				height: 7px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			
			.msg-item-self .msg-user,
			.msg-item-self .msg-content,
			.msg-item-self .msg-user-img {
				float: right;
			}
			
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #000;
				border-color: #2AC845;
			}
			
			.msg-item .msg-packet {
				background-image: url('../images/btn-rp-left.png');
				background-size: 100%;
				height: 83.5px;
				width: 220px;
				margin-left: 40px;
				padding-top: 10px;
				display: table;
			}
			
			.msg-item-self .msg-packet {
				background-image: url('../images/btn-rp-right.png');
				float: right;
				direction: rtl;
			}
			
			.msg-item .msg-packet.active-left {
				background-image: url('../images/btn-rp-left-active.png');
			}
			
			.msg-item .msg-packet.active-right {
				background-image: url('../images/btn-rp-right-active.png');
			}
			
			.msg-item .msg-packet p {
				font-size: 14px;
				margin-bottom: 0px;
				color: #FFFFFF;
				margin-left: 60px;
			}
			
			.msg-item .msg-packet h6 {
				margin: 17px 0px 0px 10px;
				color: #b8b8bf;
				font-size: x-small;
			}
			
			.msg-item-self .msg-packet p {
				margin-left: 0px;
				margin-right: 60px;
			}
			
			.msg-item-self .msg-packet h6 {
				margin: 17px 15px 0px 0px;
				color: #b8b8bf;
				font-size: x-small;
			}
			
			.open-rp {
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-image: url('../images/rp-bg-open.png');
				background-size: 100%;
				height: 401px;
				width: 300px;
				color: #ebcd9a;
				position: absolute;
				z-index: 2;
			}
			
			.footer {
				position: fixed;
				right: 30px;
				bottom: 50px;
				overflow: hidden;
			}
			
			.mui-btn {
				border: 1px solid #f16456;
				background-color: #f16456;
			}
			
			.mui-btn:active {
				border: 1px solid #de7c79!important;
				background-color: #de7c79!important;
			}
			
			.send-btn {
				width: 60px;
				height: 60px;
				color: #FFFFFF;
				border-radius: 50%;
				border: 3px solid #fff;
				padding: initial;
			}
		</style>
	</head>

	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-btn-link mui-pull-right" onclick="vm.help()"><span class="mui-icon mui-icon mui-icon-help" style="color: #FFFFFF;"></span></a>
			<h1 class="mui-title" id="title">房间</h1>
		</header>
		<div class="mui-content" id="bizVue">
			<div id='msg-list' @scroll="scroll">
				<!--<div class="msg-item">
					<img class="msg-user-img" src="../images/logo.png" alt="">
					<div class="msg-content">
						<div class="msg-content-inner">
							Hi，我是Content
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
				<div class="msg-item msg-item-self">
					<img class="msg-user-img" src="../images/logo.png" alt="">
					<div class="msg-content">
						<div class="msg-content-inner">
							Hi，我是Self Content
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>-->

				<div :class="['msg-item', item.memberId == member.id ? 'msg-item-self' : '']" v-for="item in list">
					<img class="msg-user-img" :src="item.headImg" alt="">
					<div :class="['msg-packet', (item.balanceQty == 0 || item.status != 0 || item.myGrabAmount > 0 || item.countDown <= 0) ? (item.memberId == member.id ? 'active-right' : 'active-left') : '']" @click="showOpen(item)">
						<p>金币:{{item.amount}}&nbsp;&nbsp;雷点:{{item.landmine}}</p>
						<p v-if="item.myGrabAmount > 0">剩余:{{item.balanceQty}}个 抢:{{item.myGrabAmount}}</p>
						<p v-else-if="item.balanceQty == 0 || item.status != 0 || item.countDown <= 0">剩余:{{item.balanceQty}}个 已结束</p>
						<p v-else>剩余:{{item.balanceQty}}个 &nbsp;{{item.countDown}}秒</p>
						<h6>{{item.nickname}}</h6>
					</div>
					<div class="mui-item-clear"></div>
				</div>
			</div>
			<div :class="{'open-rp':true, 'mui-hidden':!show}" align="center">
				<span class="mui-icon mui-icon mui-icon-close" style="float: left;" @click="close"></span>
				<img :src="sendPacket.headImg" width="50px" height="50px" class="mui-block" style="margin-top: 20px;clear: both;" />
				<h6 style="color: #ebcd9a;">{{sendPacket.nickname}}</h6>
				<h5 style="color: #ebcd9a;margin-top: 10px;">金币:{{sendPacket.amount}},雷点:{{sendPacket.landmine}}</h5>
				<h3 style="color: #ebcd9a;margin-top: 30px;">{{sendPacket.myGrabAmount == 0 ? '恭喜发财,大吉大利' : sendPacket.myGrabAmount}}&nbsp;</h3>
				<img :src="openImg" width="80px" style="margin-top: 50px;" @click="open" />
			</div>
			<div :class="{'mui-hidden':!show}" style="width: 100%;height: 100%;position: absolute;background-color: black;top:0px;z-index: 1;opacity: 0.5;">
			</div>
		</div>

		<div class="footer mui-text-center">
			<button type="button" class='mui-btn send-btn' onclick="vm.showSendPacket()">发红包</button>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#bizVue',
				data: {
					member: {},
					center: {},
					room: {},
					list: [],
					sendPacket: {},
					show: false,
					openImg: '../images/btn-rp-open.png',
					autoScroll: true
				},
				mounted: function() {
					mui.plusReady(function() {
						mui.fire(plus.webview.getWebviewById('home.html'), 'setMusic', {
							type: "room"
						});
						vm.member = JSON.parse(plus.storage.getItem("member"));
						vm.room = plus.webview.currentWebview().room;
						vm.center = plus.webview.currentWebview().center;
						if(vm.room.isVip == 0) {
							document.getElementById("title").innerText = vm.room.roomName + "(" + vm.center.minAmount + "-" + vm.center.maxAmount + ")";
						} else {
							document.getElementById("title").innerText = vm.room.roomName + "(" + vm.room.vipMinAmount + "-" + vm.room.vipMaxAmount + ")";
						}

						vm.loadData();
					});
				},
				methods: {
					loadData: function() {
						mui.postParam(RoomPacketList, {
							'roomId': vm.room.id
						}, function(result) {
							if(result.code == 0) {
								vm.list = result.page.list;
								window.setInterval(vm.countDownTimer, 1000);
								setTimeout(function() {
									$('#msg-list').scrollTop($('#msg-list')[0].scrollHeight); //设置滚动条到底部
									vm.createWS(); //创建WebSocket
								}, 100);
							} else {
								mymui(result.msg);
							}
						});
					},
					showSendPacket: function() {
						mui.fire(plus.webview.getWebviewById('home.html'), 'setMusic', {
							type: "btn"
						});
						mui.openWindow({
							id: "send-packet",
							url: "send-packet.html",
							waiting: {
								autoShow: false
							},
							show: {
								aniShow: "zoom-out"
							},
							extras: {
								center: vm.center,
								room: vm.room
							},
						});
					},
					showOpen: function(item) {
						mui.fire(plus.webview.getWebviewById('home.html'), 'setMusic', {
							type: "btn"
						});
						vm.sendPacket = item;
						if(item.memberId == vm.member.id || item.balanceQty == 0 || item.status != 0 || item.myGrabAmount > 0 || item.countDown <= 0) {
							mui.openWindow({
								id: 'my-packet-detail',
								url: '../my/my-packet-detail.html',
								extras: {
									'item': item
								},
								waiting: {
									autoShow: false
								}
							});
							return;
						}
						vm.show = true;
					},
					open: function() {
						if(vm.openImg == '../images/btn-opened.png' || vm.openImg == '../images/landmine.gif') {
							return;
						}
						vm.openImg = "../images/btn-rp-open.gif";
						mui.postParam(PacketGrab, {
							id: vm.sendPacket.id
						}, function(result) {
							if(result.code == 0) {
								vm.sendPacket.myGrabAmount = result.grab.grabAmount;
								if(result.grab.isLandmine == 1) {
									vm.openImg = "../images/landmine.gif";
									mui.fire(plus.webview.getWebviewById('home.html'), 'setMusic', {
										type: "landmine"
									});
								} else {
									vm.openImg = "../images/btn-opened.png";
									mui.fire(plus.webview.getWebviewById('home.html'), 'setMusic', {
										type: "coin"
									});
								}
							} else {
								vm.openImg = "../images/btn-rp-open.png";
								mymui(result.msg);
							}
						});
					},
					close: function() {
						vm.openImg = "../images/btn-rp-open.png";
						vm.show = false;
					},
					countDownTimer: function() {
						if(!vm.list || vm.list.length == 0) {
							return;
						}
						for(var i = vm.list.length - 1; i >= 0; i--) {
							var item = vm.list[i];
							if(item.countDown > 0) {
								item.countDown -= 1;
							}
						}
					},
					scroll: function() {
						var scrollTop = $("#msg-list").scrollTop();
						var scrollHeight = $("#msg-list")[0].scrollHeight;
						var height = $("#msg-list").height();
						if(!vm.autoScroll && scrollTop == scrollHeight - height) {
							vm.autoScroll = true;
						} else if(vm.autoScroll && scrollTop != scrollHeight - height) {
							vm.autoScroll = false;
						}
					},
					help: function() {
						mui.openWindow({
							id: "help",
							url: "help.html",
							waiting: {
								autoShow: false
							}
						});
					},
					createWS: function() {
						var websocket = null;
						//判断当前浏览器是否支持WebSocket
						if('WebSocket' in window) {
							if(baseHttpUrl.startsWith("http://")) {
								websocket = new WebSocket(baseHttpUrl.replace("http://", "ws://") + "wsRoom");
							} else {
								websocket = new WebSocket(baseHttpUrl.replace("https://", "wss://") + "wsRoom");
							}

							//连接成功建立的回调方法
							websocket.onopen = function(event) {
								websocket.send(JSON.stringify({
									"token": plus.storage.getItem("tooken")
								}));
							}

							//接收到消息的回调方法
							websocket.onmessage = function(event) {
								var result = JSON.parse(event.data);
								if(result.code == 0) {
									if("open" == result.type) {
										$("#msg-list").append('<div class="msg-item"><div class="mui-text-center"><h6>' + result.nickname + '进入房间</h6></div></div>')
										if(vm.autoScroll) {
											setTimeout(function() {
												$('#msg-list').scrollTop($('#msg-list')[0].scrollHeight); //设置滚动条到底部
											}, 100);
										}
									} else if("send" == result.type) {
										mui.fire(plus.webview.getWebviewById('home.html'), 'setMusic', {
											type: "packet"
										});
										vm.list.push(result.packet);
										if(vm.autoScroll) {
											setTimeout(function() {
												$('#msg-list').scrollTop($('#msg-list')[0].scrollHeight); //设置滚动条到底部
											}, 100);
										}
									} else if("grab" == result.type) {
										vm.list.forEach(function(item, index) {
											if(result.packet.id == item.id) {
												item.status = result.packet.status;
												item.grabAmount = result.packet.grabAmount;
												item.balanceAmount = result.packet.balanceAmount;
												item.grabQty = result.packet.grabQty;
												item.balanceQty = result.packet.balanceQty;
											}
										});
									}
								} else {
									mymui(result.msg);
									sourceBack();
								}
							}

							//连接发生错误的回调方法
							websocket.onerror = function() {
								mymui("与服务器连接发生错误");
								vm.show = false;
								mui.back();
							};
							//连接关闭的回调方法
							websocket.onclose = function() {
								mConsole.log("WebSocket连接关闭");
								setTimeout(function() {
									vm.createWS();
								}, 5000);
							}
						} else {
							mymui('Not support websocket');
						}
					}
				}
			});

			var sourceBack = mui.back;
			mui.back = function() {
				if(vm.show) {
					vm.openImg = "../images/btn-rp-open.png";
					vm.show = false;
				} else {
					//退出房间
					mui.postParam(ExitRoom, {
						roomId: vm.room.id
					});
					mui.fire(plus.webview.getWebviewById('home.html'), 'setMusic', {
						type: "bg"
					});
					sourceBack();
				}
			}
		</script>
	</body>

</html>